// 引入 sass:map 模块
@use "sass:map";

// 全局响应式断点
$breakpoints: (
  'xs': 480px,
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1600px,
);

// 获取断点值的函数 (使用明确的 map.get)
@function breakpoint($key) {
  @return map.get($breakpoints, $key);
}

// 通用容器类
.container {
  width: 100%;
  padding-right: 16px;
  padding-left: 16px;
  margin-right: auto;
  margin-left: auto;
  
  @media (min-width: breakpoint('sm')) {
    max-width: 540px;
  }
  
  @media (min-width: breakpoint('md')) {
    max-width: 720px;
  }
  
  @media (min-width: breakpoint('lg')) {
    max-width: 960px;
  }
  
  @media (min-width: breakpoint('xl')) {
    max-width: 1140px;
  }
  
  @media (min-width: breakpoint('xxl')) {
    max-width: 1320px;
  }
}

// 内容卡片
.content-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin-bottom: 24px;
}

// 页面标题
.page-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #323233;
}

// 表单样式增强
.form-section {
  margin-bottom: 32px;
  
  .form-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #323233;
  }
}

// 按钮增强
.btn-group {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  
  &.right {
    justify-content: flex-end;
  }
  
  &.center {
    justify-content: center;
  }
}

// 响应式工具类
.desktop-only {
  @media (max-width: breakpoint('md')) {
    display: none !important;
  }
}

.mobile-only {
  @media (min-width: breakpoint('md')) {
    display: none !important;
  }
}

// 动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 禁用文本选择和编辑光标
.no-select {
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

// 改进的头像样式
.user-avatar-enhanced {
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  
  &:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

// 添加页面过渡效果
.page-enter-active,
.page-leave-active {
  transition: opacity 0.2s, transform 0.2s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

// 悬浮卡片
.hover-card {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  }
}
